<template>
  <div> 
    <router-link to="/" tag="div" 
    class="header-abs"
    v-show="showAbs"
    >
        <div class="iconfont header-abs-back">&#xe624;</div>
    </router-link>
    <div class="header-fixed" v-show="!showAbs"
    :style="opacityStyle"
    >
         <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe624;</div>
        </router-link>    
        景点详情
    </div>
  </div>
</template>
<script>
export default {
    name:'DetailHeader',
    props:{
        
    },
    data(){
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    // 因为用了keepalive,所有的页面一被展示，钩子就会执行
    activated(){
        // 页面滚动大概60px之后，显示头部
        window.addEventListener('scroll',this.handleScroll)
    },
    // 页面被隐藏的时候执行，接触window的滚动绑定
    deactivated(){
        window.removeEventListener('scroll',this.handleScroll)
    },
    methods:{
        handleScroll(){
            const top= document.documentElement.scrollTop //滚动距离
            if(top>60){
                let opacity=top/140
                opacity=opacity>1?1:opacity
                this.opacityStyle={
                    opacity
                }
                this.showAbs=false
            }else{
                this.showAbs=true
            }
        }
    }
}
</script>
<style scoped lang="stylus">
@import "~styles/varibles.styl"
    .header-abs
        position absolute
        z-index 99
        left .2rem
        top .2rem
        width .8rem
        line-height .8rem
        border-radius  50%
        background rgba(0,0,0,.8)
        text-align center
        .header-abs-back
            color #fff
            font-size .4rem
    .header-fixed
        position fixed
        z-index 100
        left 0
        top 0
        // overflow hidden
        width 100%
        line-height  $headerHeight
        background $bgColor
        color #fff
        text-align center
        font-size .32rem
        .header-fixed-back  {
            position absolute
            top 0
            left 0
            width .64rem
            text-align: center;
            font-size: 0.4rem;
            color #fff;
        }

</style>
